<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>Tab侧边展开导航栏1</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css  ">
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}

		body {
			width: 100vm;
			background: #f2f2f2;
		}

		.navbar {
			position: relative;
			width: 100%;
			height: 50px;
			line-height: 50px;
			background: #fff;
			box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
		}

		.navbar input {
			display: none;
		}

		.navbar label {
			position: absolute;
			top: 0;
			left: 200px;
			font-size: 20px;
			color: #666;
			padding-left: 20px;
			cursor: pointer;
			transition: all 0.5s;
		}

		.navbar ul {
			position: absolute;
			top: 0;
			left: 0;
			width: 200px;
			height: 100vh;
			background: #20222a;
			transition: all 0.5s;
		}

		.navbar ul li {
			width: 100%;
			height: 70px;
			margin-bottom: 10px;
		}

		.navbar ul li:first-child {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 100%;
			height: 150px;
			padding: 10px;
		}

		.navbar ul li:first-child img {
			width: 80px;
			border-radius: 50%;
		}

		.navbar ul li:first-child span {
			color: #fff;
			font-size: 14px;
			white-space: nowrap;
		}

		.navbar ul li a {
			display: flex;
			align-items: center;
			width: 100%;
			height: 100%;
			color: #d2d2d2;
			text-decoration: none;
		}

		.navbar ul li a i {
			font-size: 18px;
			margin: 0 15px;
		}

		.navbar ul li a span {
			font-size: 14px;
		}

		.navbar ul li a:hover {
			color: #fff;
			border-left: 6px solid #6D6D6D;
		}

		.navbar input:checked+label {
			left: 0;
		}

		.navbar input:checked+label i {
			transform: rotateY(180deg);
		}

		.navbar input:checked~ul {
			left: -200px;
		}
	</style>
</head>

<body>
	<div class="navbar">
		<input type="checkbox" id="checkbox">
		<label for="checkbox">
			<i class="fa fa-bars"></i>
		</label>
		<ul>
			<li><img src="../images/logo.png"><span>Start_Simple的博客</span></li>
			<li><a href="#"><i class="fa fa-user"></i><span>用户信息</span></a></li>
			<li><a href="#"><i class="fa fa-envelope-square"></i><span>邮箱地址</span></a></li>
			<li><a href="#"><i class="fa fa-comments-o"></i><span>社交群聊</span></a></li>
			<li><a href="#"><i class="fa fa-cart-arrow-down"></i><span>订单详情</span></a></li>
			<li><a href="#"><i class="fa fa-cube"></i><span>其他应用</span></a></li>
		</ul>
	</div>
</body>

</html>